<template>
  <div id="app">
    <img src="./assets/img/daipingjia.png" alt="" class="lz_circle" id="div" @click="goIndex">
    <router-view />
  </div>
</template>
<script>
export default {
  name: "",
  components: {},
  props: [],
  data() {
    return {
      active:"0"
    };
  },
  mounted() {
    this.$nextTick(() => {
      var flag = 0; // 标记是拖曳还是点击
      var _this = this;
      var oDiv = document.getElementById("div");
      var disX,
        moveX,
        L,
        T,
        starX,
        starY,
        starXEnd,
        starYEnd,
        disY,
        disX,
        moveX,
        moveY;
      document.getElementById("div").addEventListener("touchstart", (e) => {
        flag = 0;
        e.preventDefault(); // 阻止触摸时页面的滚动，缩放
        disX = e.touches[0].clientX - document.getElementById("div").offsetLeft;
        disY = e.touches[0].clientY - document.getElementById("div").offsetTop;
        // 手指按下时的坐标
        starX = e.touches[0].clientX;
        starY = e.touches[0].clientY;
        // console.log(disX);
      });




      document.getElementById("div").addEventListener("touchmove", (e) => {
        flag = 1;
        L = e.touches[0].clientX - disX;
        T = e.touches[0].clientY - disY;
        // 移动时 当前位置与起始位置之间的差值
        starXEnd = e.touches[0].clientX - starX;
        starYEnd = e.touches[0].clientY - starY;
        // console.log(L);
        if (L < 0) {
          // 限制拖拽的X范围，不能拖出屏幕
          L = 0;
        } else if (
          L >
          document.documentElement.clientWidth -
            document.getElementById("div").offsetWidth
        ) {
          L =
            document.documentElement.clientWidth -
            document.getElementById("div").offsetWidth;
        }
        if (T < 0) {
          // 限制拖拽的Y范围，不能拖出屏幕
          T = 0;
        } else if (
          T >
          document.documentElement.clientHeight -
            document.getElementById("div").offsetHeight
        ) {
          T =
            document.documentElement.clientHeight -
            document.getElementById("div").offsetHeight;
        }
        moveX = L + "px";
        moveY = T + "px";
        // console.log(moveX);
        document.getElementById("div").style.left = moveX;
        document.getElementById("div").style.top = moveY;
      });




      document.getElementById("div").addEventListener("touchend", (e) => {
        if (flag === 0) {
          // 点击
          _this.$router.push("/liuyan");
        }
      });
    });
  },
  methods: {
    goIndex() {
      this.$router.push("/liuyan");
    },
  },
  computed: {},
  watch: {},
  created() {},
};
</script>
<style lang="scss">
body {
  margin: 0;
  padding: 0;
  list-style: none;
}
.lz_circle{
  width: 50px !important;
  height: 50px;
  border-radius: 50%;
  background: #03867b;
  position: absolute;
  bottom: 100px;
z-index: 9999;
  right: 0;
 
}
</style>